<!DOCTYPE html>
<html ng-app="TimeZoneMate" ng-strict-di>
<head>
<title> Track and convert time across multiple time zones. </title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="A world clock where you can add multiple time zones. You can also convert time across these time zones. Supports ability to bookmark and share a view with a set of clocks." />
<meta name="google" content="nositelinkssearchbox" />
<meta name="google" content="notranslate" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<!-- Determine local timeZone name -->
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js'></script>

<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.7/jquery.devbridge-autocomplete.min.js'></script>

<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.6.12/jquery.timepicker.min.js'></script>
<script type="text/javascript" src="assets/libs/timepicker/timepickerdirective.min.js"></script>

<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js'></script>
<script type="text/javascript" src="assets/libs/moment-data/moment-timezone-with-data.min.js"></script>

<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css">

<script src="app.js"></script>

<!-- Google Analyitcs -->
<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-64120305-1', 'auto');
	  ga('send', 'pageview');
</script>

</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:gray">
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-6 col-sm-6 col-xs-12">
				<div class="row">
					<a href="/">
						<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
							<span class="heading-color1">TIME</span>
							<span class="heading-color2">ZONE</span>
							<span class="heading-color1">MATE</span>
						</div>
					</a>
				</div>
			</div>
			<div class="col-lg-6 col-sm-6 col-xs-12"></div>
		</div>
	</div>
</nav>

<div ng-controller="ClockController">
	<div class="container">
		<div class="row">
			<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
				<label> {{localTime.title}} </label>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
				<p class="input-group">
					<input type="text" validtime=true index=0 name="localTime" class="form-control bold-input" ng-model="localTime._timePart" ng-change="timestampChanged($index)" ui-timepicker time-picker-validator ui-timepicker-events />
					<span class="input-group-btn">
						<button type="button" class="btn green-button" ng-click="open($event, 0)"><i class="glyphicon glyphicon-calendar"></i></button>
					</span>
					<input readonly type="text" class="form-control hidden-date-input invisible" ng-change="dateChanged(0)" ng-model="localTime.datePartGetterSetter" ng-model-options="{getterSetter: true}"
							is-open="localTime.editMode" ng-required="true" datepicker-popup="yyyy-MM-dd" show-button-bar="false" />
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
				<label ng-if="!localTime.invalidTime" class="complete-time" ng-bind="localTime.moment.format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ')"></label>
				<span ng-if="localTime.invalidTime" class="label label-danger">Invalid Time</span>
			</div>
		</div>
		<div id="outer" class="row">
			<div id="inner" class="col-lg-2 col-lg-offset-5 col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2">
				<button type="button" class="btn blue-button" blur-on-release ng-click="pauseOrResetClocks()"> {{togglePauseResetText}} </button>
				<button type="button" class="btn blue-button" blur-on-release ng-click="toggleClockAdder()"> Add Clock </button>
			</div>
		</div>
	</div>

	<div class="container">
			<div class="row spacer">
			</div>
	</div>

	<div class="container" collapse="isCollapsed">
		<div class="row">
			<div class="col-lg-5 col-lg-offset-3 col-sm-7 col-sm-offset-2 col-xs-9">
				<label> Add Clock </label>
			</div>	
			<div class="col-lg-1 col-sm-1 col-xs-3">
				<button type="button" class="btn btn-info btn-circle pull-right" ng-click="toggleClockAdder()"><i class="glyphicon glyphicon-minus"></i></button>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12" ng-class="{'has-error':!timeZoneBeingAddedIsValid}">
				<input type="text" class="form-control" placeholder="Try New York, India, PST, GMT+4:30 etc." name="timeZoneToBeAdded" ng-model="timeZoneToBeAdded"
						auto-complete time-zone-being-added-is-valid="timeZoneBeingAddedIsValid" include-peripehral-locations="includePeripehralLocations">
			</div>
		</div>

		<div class="row">
			<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12" ng-hide="timeZoneBeingAddedIsValid">
				<label class="center-block text-danger pull-left error-message"><i> Sorry, that time zone is not supported. Click here if you think it should be supported. </i></label>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
				<div class="checkbox pull-right">
				  <label>
					<input type="checkbox" ng-change="includePeripehralLocations(isIncludePeripehralLocations)" ng-model="isIncludePeripehralLocations"></input>
					<span>Include all locations</span>
				  </label>
				</div>
			</div>
		</div>

		<div class="row spacer">
		</div>
	</div>

	<ol class="list-group">
		<li class="list-group-item" ng-repeat="addedTimeZoneChunk in addedTimeZoneChunks">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-6 col-sm-6 col-xs-12" ng-repeat="addedTimeZone in addedTimeZoneChunk">
						<div class="row">
							<div class="col-lg-5 col-lg-offset-3 col-sm-7 col-sm-offset-2 col-xs-9">
								<div class="row spacer">
									<div class="col-lg-12 col-sm-12 col-xs-12">
										<label> {{addedTimeZone.title}} </label>
									</div>
								</div>
							</div>
							<div class="col-lg-1 col-sm-1 col-xs-3">
								<button type="button" class="btn btn-danger btn-circle pull-right" index="(2*$parent.$index) + $index + 1" ng-click="removeTimeZone((2*$parent.$index) + $index + 1)"><i class="glyphicon glyphicon-remove"></i></button>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
								<p class="input-group">
									<input type="text" name="{{'addedTimeZone-' + $index }}" validtime=true class="form-control bold-input" index="(2*$parent.$index) + $index + 1" ng-model="addedTimeZone._timePart" ng-change="timestampChanged((2*$parent.$index) + $index + 1)" ui-timepicker time-picker-validator ui-timepicker-events>
									<span class="input-group-btn">
										<button type="button" class="btn green-button" ng-click="open($event, (2*$parent.$index) + $index + 1)"><i class="glyphicon glyphicon-calendar"></i></button>
									</span>
									<input readonly type="text" class="form-control hidden-date-input invisible" ng-change="dateChanged((2*$parent.$index) + $index + 1)" ng-model="addedTimeZone.datePartGetterSetter" ng-model-options="{getterSetter: true}"
											is-open="addedTimeZone.editMode" ng-required="true" datepicker-popup="yyyy-MM-dd" show-button-bar="false" />
								</p>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
								<label ng-if="!addedTimeZone.invalidTime" class="complete-time" ng-bind="addedTimeZone.moment.format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ')"></label>
								<span ng-if="addedTimeZone.invalidTime" class="label label-danger">Invalid Time</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</li>
	</ol>

	<ol class="list-group">
		<li class="list-group-item" ng-repeat="rows in addedTimeZonesChunks">
			<div class="container">
				<div class="row">
					<div class="col-lg-6" ng-repeat="item in rows">
						<label> mahesh {{item.title}} </label>
					</div>
				</div>
		</li>
	</ol>
</div>

<nav class="navbar navbar-default navbar-fixed-bottom">
	<div class="container">
		<div class="row">
			<div class="col-xs-4" id='outer'>
				<a class='faded' href="about.html">about</a>
			</div>
			<div class="col-xs-4" id='outer' class='faded'>
				<a class='faded' href="mailto:timezonemate@gmail.com">feedback</a>
			</div>
			<div class="col-xs-4" id='outer' class='faded'><span class='faded'>&copy;2015</span></div>
		</div>
	</div>
</nav>

</body>
</html>